<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(70) + 'px' }"
			v-show="!hiddenModel">
			<text>模版分类</text>
		</view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 模版分类</text>
		</view>
		
		<view>
			<!-- category-list：分类列表  @itemClick：条目点击 -->
			<cc-beautyCate :category-list="categoryList" @itemClick="toCategory" @itemIndex='itemIndex'></cc-beautyCate>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				scrollTop: 0, //滚动距离
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: 0,
				pid: '',
				// tabs:[],
				// {
				// 		cid: 1,
				// 		main_name: '女装',
				// 		data: [{
				// 				next_name: '裙装',
				// 				info: [{
				// 						son_name: '连衣裙',
				// 						imgurl: 'http://img.haodanku.com/89937f347f81f5c5539f9da9b35b7a62-600'
				// 					},
				// 					{
				// 						son_name: '雪纺裙',
				// 						imgurl: 'http://img.haodanku.com/3deb054da8cb2f4b1b5a07ab530e7e41-600'
				// 					},
				// 					{
				// 						son_name: '半身裙',
				// 						imgurl: 'http://img.haodanku.com/b68bc66ab1a81db336110b7c1196b5a9-600'
				// 					},
				// 					{
				// 						son_name: '印花裙',
				// 						imgurl: 'http://img.haodanku.com/3ce7249ba847286308c82bed97f7817d-600'
				// 					},
				// 					{
				// 						son_name: '吊带裙',
				// 						imgurl: 'http://img.haodanku.com/0716abc13652355b130dc3c83d39a7dc-600'
				// 					},
				// 					{
				// 						son_name: '纯色裙',
				// 						imgurl: 'http://img.haodanku.com/de464503dab5d20a5d6505573f1624bd-600'
				// 					}
				// 				]
				// 			},
				
				// 		]
				// 	},
				// 	{
				// 		cid: 2,
				// 		main_name: '男装',
				// 		data: [{
				// 				next_name: '内搭',
				// 				info: [{
				// 						son_name: '长袖T恤',
				// 						imgurl: 'http://img.haodanku.com/0cd092e3914e60ed74954bbba638d093-600'
				// 					},
				// 					{
				// 						son_name: 'polo衫',
				// 						imgurl: 'http://img.haodanku.com/0503477c4c5d9618b5be5dc3f7712dcf-600'
				// 					},
				// 					{
				// 						son_name: 'T恤',
				// 						imgurl: 'http://img.haodanku.com/439ba8ee07892f939714783e5f5fa49d-600'
				// 					},
				// 					{
				// 						son_name: '卫衣',
				// 						imgurl: 'http://img.haodanku.com/fa31cffcb202ac6523853af99810afb9-600'
				// 					},
				// 					{
				// 						son_name: '短袖T恤',
				// 						imgurl: 'http://img.haodanku.com/c12f373877a7a4b9e4856d552c91e3b3-600'
				// 					},
				// 					{
				// 						son_name: '衬衣',
				// 						imgurl: 'http://img.haodanku.com/9d792370897c7f393059514b17a0cb14-600'
				// 					}
				// 				]
				// 			},
				
				// 		]
				// 	},


				categoryList: [



				]

			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.createdgetSystemInfo()
			this.templateClassificat()
			
			


		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},

		computed: {


		},
		methods: {
			itemIndex(e) {
				console.log(e)
			},

			toCategory(e) {
				console.log(e)
			
				this.$sun.navGo('/pagesA/creatCenter/creativeList/Classification?objs=' + encodeURIComponent(JSON
					.stringify(
						e)))
			},
			async twoClassify() {



				const result = await this.$http.post({
					url: this.$api.templateClassification,
					data: {

						// 上级id
						pid: this.pid,
						page: 1,
						limit: 10




					}
				});
				if (result.errno == 0) {
					this.categoryList[0].data = result.data.map((item, index) => {
						return {
							next_name: item.classificationName,
							info: [{
								son_name: item.classificationName,
								imgurl: item.categoryImages,
								id
							}]

						}
					})
				}

			},
			async templateClassificat() {

				const result = await this.$http.get({
					url: this.$api.classificationQuery,
					data: {

					}
				});
				if (result.errno == 0) {
					console.log(result.data)
				
					this.categoryList = result.data.map((item, index) => {
						console.log(item.children)
						return {
							cid: index + 1,
							main_name: item.classificationName,
							data: [{
								next_name: item.classificationName,
								info:item.children
								}]

						}
					})
					
					
					this.classificationList()
					
					
					
					
					console.log(this.categoryList )
					// this.pid = result.data[0].id

					// this.classifyList = result.data

					console.log(this.tab)






				}

			},
			
			async classificationList() {
			
				const result = await this.$http.get({
					url: this.$api.classificationList,
					data: {
			
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					
					// let arr = result.data.map((item,index)=>{
					// 	return {
					// 		 categoryImages:item.categoryImages,
					// 		 classificationName: item.classificationName,
					// 	}
					//  })
					 
					
				
	                let category = {
	                		cid: 0,
	                		main_name: '推荐',
	                		data: [{
	                			next_name: '推荐',
	                			info: result.data
	                
	                		}]
	                
	                	}
			         console.log(category)
			
			         this.categoryList.unshift(category)
			
			
			
				}
			
			},
			
			
			
			navBack() {
				this.$sun.navBack()
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},


		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-color: #F0F2FE;
		// background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 20rpx;


		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 50rpx
		}

	}
</style>